import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from "react-redux"
import { ALLSTATE, ADDDETAIL } from "../../types/store.d"
import { Toast, NavBar, Button, Sidebar, Image, ProductCard, Tag, Grid } from 'react-vant';
import {useNavigate,useLocation} from "react-router-dom"

interface DATATYPE{

}
function Detail(props:DATATYPE) {
  const location=useLocation()
  const myobj=location.state as any;
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const addbook=()=>{
    dispatch({
      type:ADDDETAIL,
      payload:myobj,
    })
    navigate("/home/index")
  }
  return (
    <div>
       <NavBar
      title={myobj.title}
      leftText="返回"
      rightText="按钮"
      onClickLeft={() => navigate("/")}
      onClickRight={() => Toast('按钮')}
    />
    <div>
      <h3 style={{textAlign:"center",lineHeight:"50px"}}>{myobj.title}</h3>
      <div style={{display:"flex",justifyContent:"space-between",margin:"20px 0"}}>
        <img src={myobj.img} alt="" />
        <div style={{width:"70%"}}>
          <p>作者：{myobj.name}</p>
          <p>题目：{myobj.title}</p>
          <p>连载</p>
        </div>
      </div>
      <div className="demo-button">
      <Button type="default" onClick={()=>addbook()}>加入书包</Button>
      <Button type="primary">开始阅读</Button>
      <Button type="default">离线下载</Button>
    </div>
    </div>
    </div>
  )
}

export default Detail